<template>
  <div class="content-wrapper">
    <div class="content" :style="{ 'height': documentClientHeight + 'px' }" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="(trend, index) in trendsList" :key="trend.id">
        <p class="date" v-if="index===0 || trend.dynamicCreateTime !== trendsList[index-1].dynamicCreateTime">{{trend.dynamicCreateTime}}</p>
        <div class="trend-detail">
          <p class="row-1">{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype==='1'">{{trend.dynamicPerformOperation}}</span></p>
          <span class="row-2">{{dynamicAscription[Number(trend.dynamicAscription) - 1]}}</span>
          <p class="row-3">{{trend.dynamicContent}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      documentClientHeight: '',
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      trendsList: [],
      dynamicAscription: ['HR招聘', '人事档案', '固定资产', '系统设置'],
    };
  },
  components: {},
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    }
  },
  mounted () {
    this.documentClientHeight = document.documentElement['clientHeight'] - 50
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 50
    }
    this.searchData(true)
  },
  methods: {
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.searchData();
    },
    async searchData(init) {
      if(init) {
        this.page = 1;
        this.isFirstLoading = true;
        this.trendsList = [];
      }
      let {list, totalPage} = await this.$httpN.postB('dynamic/hrdynamic/list',{
        limit: 30,
        page: this.page
      })
      if(typeof list === 'undefined') return
      this.trendsList.push(...list);
      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper{
  height: 100vh;
  padding: 0 20px;
  background-color: #F5F7F9;
  .content{
    z-index: 2;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      scrollbar-arrow-color:red;
    }
    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 5px;
      box-shadow: inset 0 0 5px #DEDEDE;
      background: rgba(0,0,0,0.2);
      scrollbar-arrow-color:red;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
      box-shadow: inset 0 0 5px #F5F5F5;
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
    .date{
      font-size: 18px;
      margin: 20px 0;
      padding: 0 20px;
    }
    .trend-detail{
      padding: 20px 40px;
      border-bottom: 1px solid #DCDFE6;
      p{
        margin: 0;
      }
      .row-1{
        margin-bottom: 10px;
        span{
          margin-left: 15px;
          color:#606266;
        }
      }
      .row-2{
        margin-bottom: 10px;
        font-size: 13px;
        display: inline-block;
        color: #C0C4CC;
        cursor: pointer;
        &:hover{
          color: #409EFF;
        }
      }
      .row-3{
        color: #909399;
        word-break: break-all;
      }
    }
  }
}
</style>